<template>
  <div id="me">
    <Layout>
      <Content>
        <List border>
          <ListItem>
            <div id="username">用户名：{{ user.username }}</div>
          </ListItem>
          <ListItem>
            <div id="name">姓名：{{ user.name }}</div>
          </ListItem>
          <ListItem>
            <div id="last_login">上次登录：{{ user.last_login }}</div>
          </ListItem>
          <ListItem>
            <div id="date_joined">注册时间：{{ user.date_joined }}</div>
          </ListItem>
           <ListItem>
            <div id="token">token：{{ user.token }}</div>
             <Button @click="get_token">获取token（会导致当前token失效）</Button>
          </ListItem>
        </List>
        <Button @click="logout">登出</Button>
      </Content>
    </Layout>
  </div>
</template>

<script>
export default {
  name: "Me",
  data() {
    return {
      user: "",
    };
  },
  methods: {
    formatDate(UTCDateString) {
      if (!UTCDateString) {
        return "-";
      }
      function formatFunc(str) {
        //格式化显示
        return str > 9 ? str : "0" + str;
      }
      var date2 = new Date(UTCDateString); //这步是关键
      var year = date2.getFullYear();
      var mon = formatFunc(date2.getMonth() + 1);
      var day = formatFunc(date2.getDate());
      var hour = formatFunc(date2.getHours());
      var minute = formatFunc(date2.getMinutes());
      var second = formatFunc(date2.getSeconds());
      var dateStr =
        year + "-" + mon + "-" + day + " " + hour + ":" + minute + ":" + second;
      return dateStr;
    },
    logout() {
      this.$api.get("logout/", {}, (response) => {
        if (response.status != 200) {
          this.$Message.error("操作失败，服务器错误");
          this.$Message.error("" + response);
        } else {
          var data = response.data;
          if (data.data.result == true) {
            this.logined = false;
            this.$Message.success("操作成功");
            this.$router.push("/");
          }
        }
      });
    },
    get_token() {
      this.$api.put("token/", {}, (response) => {
        if (response.status != 200) {
          this.$Message.error("操作失败，服务器错误");
          this.$Message.error("" + response);
        } else {
          var data = response.data;
          if (data.err_code == 0) {
            this.user.token = data.data
          }
          else{
             this.$Message.error("操作失败，"+data.error);
          }
        }
      });
    },
  },
  created: function () {
    this.$Loading.start();
    this.$api.get("me/", {}, (response) => {
      if (response.status == 200) {
        var data = response.data;
        if (data.err_code == 0) {
          data = data.data;
          this.user = data;
          this.user.last_login = this.formatDate(new Date(data.last_login));
          this.user.date_joined = this.formatDate(new Date(data.date_joined));
          this.$Loading.finish();
        } else {
          this.$Message.error(data.error);
          this.$Loading.error();
        }
      } else {
        this.$Message.error("抱歉，发生错误");
        this.$Message.error("" + response);
        this.$Loading.error();
      }
    });
  },
};
</script>

<style scoped>
</style>
